<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
     <h1>计算器</h1>
    第一个数据 <input type="text" v-model="numone"    />
     <select v-model="selVal">
       <option value="+">+</option>
       <option value="-">-</option>
       <option value="*">*</option>
       <option value="/">/</option>
     </select>
     第二个数据:<input type="text" v-model="numtwo" />
     <h1 id="total">结果：{{total}}</h1>

     <button @click="toCount">计算</button>
  </div>
   <script src="./vue.js"></script>
   <script>
    // 点击时候获取第一个输入框的值
    // 点击时候获取第二个输入框的值
    // 点击时候获取下拉框的值
    // 判断下拉框选择的是什么 
    // 如果是+  将第一个输入框和第二个输入的值相加 
    // 加的结果 存储到总数 渲染到页码
   
    // 如果是- 依次类推
     new Vue({
        el:"#app",//声明vue实例的管理范围
        data(){//当前组件用到所有数据
          return {
            numone:0,//收集第一个输入框的值
            numtwo:0,//收集第二个输入框的值
            selVal:"+",//收集下拉框的值
            total:0,//总数
          }
        },
        methods:{//当前组件用到所有方法函数
          toCount(){ //es6简写函数
            // this 代表当前vue实例
               if(this.selVal=='+'){
                 this.total=Number(this.numone)+Number(this.numtwo)
               }else if(this.selVal=='-'){
                  this.total=this.numone-this.numtwo
          
               }else if(this.selVal=='*'){
                   this.total=this.numone*this.numtwo
               }else if(this.selVal=='/'){
                  this.total=this.numone/this.numtwo
               }
          }
        }

      })


   </script>
</body>
</html>